<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" background-color="#ebf1f6">
      <div style="height: 100%">
        <div
          v-for="(item, i) in items"
          :key="i"
          class="menu"
          :class="activeName == item.id ? 'activeBg' : ''"
        >
          <div class="title" @click="selectMenu(item)">
            <i :class="item.icon"></i>
            <span class="text">{{ item.name }}</span>
            <div class="arrow" v-if="item.child.length > 0">
              <i v-if="item.id == activeName" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div
            class="collspan"
            v-if="item.id == activeName && item.child.length > 0"
          >
            <div
              v-for="(menu, c) in item.child"
              :key="'c' + c"
              class="child-menu"
              @click="handleMenu(menu.path)"
            >
              <i :class="menu.icon"></i>
              <span class="text">{{ menu.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      activeName: 0,
      menuTree: [],
    };
  },

  computed: {},

  watch: {},

  created() {
  },

  mounted() {
  },

  methods: {
    addRouters(list) {
      this.$store.dispatch("pushRoute", list);
    },
    getMenus() {
      this.items = [];
      let param = {
        partition: "0",
      };
      this.$createHttp.menuTree(param).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("routers", JSON.stringify(res.data));
          this.renderMenus(res.data);
          res.data.map((item) => {
            if (item.visible) {
              this.items.push(item);
            }
          });
          this.addRouters(this.menuTree);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handleMenu(path) {
      this.$router.push(path);
    },
    selectMenu(opt) {
      if (this.activeName == opt.id) {
        this.activeName = 0;
      } else {
        this.activeName = opt.id;
      }
      if (opt.child.length == 0) {
        this.handleMenu(opt.path);
      }
    },
    renderMenus(data) {
      if (data.length > 0) {
        data.map((menu) => {
          if (menu.child.length > 0) {
            this.renderMenus(menu.child);
          } else {
            if (menu.component) {
              let router = {
                path: menu.path,
                name: Symbol(menu.componentName),
                component: () => import(`@/components${menu.component}`)
              }
              this.menuTree.push(router);
            }
          }
        })
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu {
  width: 200px;
}

.sidebar > ul {
  height: 100%;
}

.menu {
  width: 200px;
  padding: 0;
}

.menu :hover {
  cursor: pointer;
  background: #fff;
}

.menu .title {
  height: 50px;
  line-height: 50px;
  color: #409eff;
  position: relative;
  padding: 0 10px;
}

.text {
  color: #606266;
  margin: 0 5px;
}

.menu .title .arrow {
  position: absolute;
  right: 10px;
  top: 0;
}

.collspan {
  width: 200px;
  background: #fff;
}

.child-menu {
  height: 45px;
  line-height: 45px;
  width: 200px;
  padding: 0 25px;
}
</style>
